<template>
  <section class="section">
    <div class="container">
      <h1 class="title">
        视频列表
        <span class="is-pulled-right is-size-6">page {{ currentPage }}</span>
      </h1>
      <table class="table is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th>ID</th>
            <th>标题</th>
            <th>价格(元)</th>
            <th>封面</th>
            <th>用途</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.title }}</td>
            <td>￥ {{ item.price }}</td>
            <td>
              <img :src="item.pic" width="110px">
            </td>
            <td>{{ item.purpose }}</td>
          </tr>
        </tbody>
      </table>
      <pagination :current="currentPage" :total="total" :page-size="pageSize" @change="pageChange"></pagination>
    </div>
  </section>
</template>

<script>
import { videoPage } from "../api";
import pagination from "../components/pagination";
import { flash } from "../functions";
export default {
  components: {
    pagination
  },
  data() {
    return {
      list: [],
      pageSize: 10, //每页显示20条数据
      currentPage: 1, //当前页码
      total: 0
    };
  },
  created() {
    videoPage(1, this.pageSize, res => {
      this.list = res.data.data.list;
      this.total = res.data.data.total;
    });
  },
  methods: {
    //从page组件传递过来的当前page
    pageChange(page) {
      videoPage(page, this.pageSize, res => {
        this.currentPage = page;
        this.list = res.data.data.list;
        this.total = res.data.data.total;
      });
    }
  }
};
</script>
